<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>modal</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .modal {
            width: 100vw;
            height: 100vh;
            display: none;
            background: rgba(0, 0, 0, 0.3);
            position: absolute;
            top: 0;
        }
        .modal-dialog {
            width: 500px;
            position: relative;
            margin: auto;
            background: #ffffff;
            border-radius: 5px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        }
        .header {
            height: 50px;
            padding: 15px;
            border-bottom: 1px solid #b4b0b0;
        }
        .content {
            padding: 15px;
        }
        .footer {
            padding: 15px;
            text-align: right;
        }
        .btn {
            padding: 8px;
            margin: 2px;
            border-radius: 5px;
            border: none;
            color: white;
            font-size: 1em;
        }
        .btn-secondary {
            background-color: gray;
        }
        .btn-primary {
            background-color: #6363da;
        }
        .btn-fff{
            background-color: #6363da;
        }
    </style>
</head>
<body>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
        Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
        voluptatem voluptates, voluptatum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
        Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
        voluptatem voluptates, voluptatum!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dicta ex laudantium ratione sint.
        Aperiam dignissimos enim eos ex laudantium maxime neque nobis nulla odio rem soluta totam, unde
        voluptatem voluptates, voluptatum!</p>
</div>
<button class="btn btn-fff" type="button" data-toggle="modal" data-target="#exampleModal">
    点击激活模态框
</button>
<div class="modal fade" id="exampleModal">
    <div class="modal-dialog">
        <div class="header">
            <h3 class="title" id="exampleModalLabel">Modal title</h3>
        </div>
        <div class="content">
            Woohoo, you're reading this text in a modal!
        </div>
        <div class="footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    //页面按钮
    $("[data-target]").click(function () {
        let id = $(this).data("target");
        let modal = `${id}`;
        $(modal).fadeIn();
        $(modal).children(".modal-dialog").animate({top: "30px"}, 300);
        $("button[data-dismiss]").css("border","none");
    });
    $(".modal").click(function () {
        $(this).fadeOut();
        $(this).children(".modal-dialog").animate({top: "0"}, 300);
    });
    //点击close，消失
    $("button[data-dismiss]").click(function () {
        $(this).css("border","2px solid #bd0c19");
        $(this).parents(".modal").fadeOut();
        $(this).parents(".modal").children(".modal-dialog").animate({top: "0"}, 300);
    });
    $(".modal .modal-dialog").click(false);
</script>
</body>
</html>